// 引入变量和全局样式
@use "var.scss" as *;
@use "global.scss" as *;

.setting {
    margin: 1.875rem 3%; // 使用相对单位rem
    margin-top: 3.125rem; // 使用相对单位rem
    min-height: 40.625vh; // 使用相对单位rem
    @include layout;
    background-color: $color-white;
    border-radius: 0.75rem; // 使用相对单位rem
}

/* 左侧导航栏 */

.leftCol {
    margin-top: 0.625rem; // 使用相对单位rem
    padding: 1.25rem 1.25rem; // 使用相对单位rem
    box-sizing: border-box;
    width: 12.5rem; // 使用相对单位rem
    .settingsMainHeader {
        height: 3.75rem; // 使用相对单位rem
        line-height: 3.75rem; // 使用相对单位rem
        font-size: 1.375rem; // 使用相对单位rem
        font-weight: 500;
        padding-left: 1rem;
    }
}

.setting-aside {
    width: 100%;
    white-space: nowrap;
    /* 让所有 li 元素在一行内显示，因为 ul 元素宽度为 100% */
    li {
        display: block;
        /* 让 li 元素在垂直方向上居中对齐 */
        height: 2.5rem; // 使用相对单位rem
        line-height: 2.5rem; // 使用相对单位rem
        font-size: 1.125rem; // 使用相对单位rem
        padding: 0 0.625rem; // 左右增加 0.625rem 的间距，使用相对单位rem
        box-sizing: border-box;
        border-radius: 0.3125rem; // 使用相对单位rem
        margin-right: 0.125rem; // 使用相对单位rem
        cursor: pointer;

        &:last-child {
            margin-right: 0; // 去掉最后一个元素的右侧边距
        }

        &:hover {
            background-color: $color-blue-active;
            color: $color-white;
        }

        &:active {
            background-color: $color-blue-shallow;
        }
    }
}

.activeColor {
    background-color: $color-blue-shallow !important;
    color: $color-white;
}

/* 右边内容 */

.contentCol {
    flex: 1;
    padding-top: 1.25rem; // 使用相对单位rem
}

@media screen and (max-width: 600px) {
    .setting {
        flex-direction: column;
    }
    .leftCol {
        width: 100%;
        padding: 0;
    }
    .contentCol {
        width: 100%;
        padding: 0;
    }
    .setting-aside {
        li {
            display: inline-block;
            vertical-align: middle;

            &:first-child {
                margin-left: 0.625rem; // 左侧增加 0.625rem 的间距，使用相对单位rem
            }
        }
    }
}

.night-mode .setting {
    background-color: #21252b;
    color: #ffffff;
}

.night-mode .article-content-container {
    ::v-deep .el-upload-dragger {
        background-color: #21252b;
        color: #ffffff;
    }
}

::v-deep .el-upload-dragger {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.49),
        rgba(255, 255, 255, 0.49)
    );
}
